<script>
import UniIcon from 'uview-ui/components/u-icon/u-icon';

export default {
  name: 'MyBase',

  props: {
    title: {
      type: String,
      default: ''
    },

    icon: {
      type: String,
      default: '' // moments
    },

    isShowIconArrow: {
      type: Boolean,
      default: true
    },

    disabled: {
      type: Boolean,
      default: false
    }
  },

  render(h) {
    const { header, content } = this.$scopedSlots;
    const IconTitle = this.icon && h(UniIcon, {
      class: 'title_icon',
      props: {
        size: '48',
        color: '#1492FF',
        name: this.icon
        // name: 'https://cdn.uviewui.com/uview/example/button.png'
      }
    });

    const IconArrow = this.isShowIconArrow && h(UniIcon, {
      class: 'arrow_icon',
      props: {
        size: '38',
        color: '#999999',
        name: 'arrow-right'
      }
    });

    return (
      <div class='MyBase animate__animated animate__slideInUp'>
        <div class='MyBase_header'>
          <div class='MyBase_header_content'>
            {
              IconTitle
            }
            <div class='MyBase_header_title'>{ header && header() || this.title }</div>
          </div>
        </div>

        <div class='MyBase_content'>
          <div class='MyBase_content_content'>
            {content && content()}
          </div>
          {
            IconArrow
          }
        </div>
      </div>
    );
  }
};
</script>

<style lang="less" scoped>
.MyBase {
  @mr: 16px;
  background-color: #fff;
  position: relative;
  animation-duration: .8s;
  &::after {
    content: '';
    display: block;
    margin-left: 20px;
    height: 1px;
    transform-origin: 0 0;
    background-color: #F6F6F6;
  }
  .MyBase_header {
    position: relative;
    .MyBase_header_content {
      .title_icon {
        margin-right: 10px;
      }
      padding: 12px @mr;
      display: flex;
      align-items: center;

      .MyBase_header_title {
        font-size: 18px;
        flex: 1;
      }
    }

  }

  .MyBase_content {
    font-size: 18px;
    padding: 12px @mr;
    color: #606266;
    display: flex;

    .MyBase_content_content {
      flex: 1;
    }

    .arrow_icon {
      width: 15px;
    }
  }
}
</style>
